<template>
  <view class="login-page">
    <up-icon @click="returnStart" style="margin-top: 14.4vw; margin-left: 5vw" color="gray" size="6.4vw" name="arrow-left"></up-icon>
    <view class="login-content">
      <text class="title">欢迎来到摄图</text>
      <inputItem v-model="userForm.phone" showText="请输入电话号码" iconType="phone"></inputItem>
      <inputItem v-model="userForm.code" showText="请输入验证码" iconType="lock">
        <template #suffix>
          <view class="code">
            <up-code ref="uCodeRef" @end="end" @start="start" @change="codeChange" :seconds="60" startText="获取验证码" endText="重新获取" change-text="X秒重新获取"></up-code>
            <up-button @tap="getCode" :text="tips" color="black" shape="circle" size="mini" :customStyle="buttonStyle"></up-button>
          </view>
        </template>
      </inputItem>
      <text style="font-size: 3.6vw; color: rgba(200, 200, 200, 1); font-weight: 500">未注册的手机号验证后自动创建摄图账号</text>
      <up-button @click="login()" size="large" text="登录" :customStyle="loginbuttonStyle" color="black"></up-button>
      <view class="otherWay">
        <up-icon name="weixin-fill" label="微信" labelPos="bottom" size="6.4vw" labelSize="3.6vw" space="1.2vw"></up-icon>
        <text style="width: 0; height: 3.6vw; border: 1px solid #ddd"></text>
        <up-icon name="qq-fill" label="QQ" labelPos="bottom" size="6.4vw" labelSize="3.6vw" space="1.2vw"></up-icon>
      </view>
      <text style="font-size: 3.6vw; color: #c8c8c8; margin-bottom: 13.2vw">
        登录即同意
        <text style="text-decoration: underline" @click="toAgreement">用户协议</text>
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import inputItem from './components/inputItem.vue';
const userForm = reactive({
  phone: null,
  code: null
});
// const value = ref('');
const toAgreement = () => {
  uni.navigateTo({
    url: '/subpkg_agreement/index'
  });
};

function login() {
  uni.switchTab({
    url: '/pages/home/index'
  });
}

const inputStyle = reactive({
  width: '80vw',
  height: '12.7vw',
  backgroundColor: 'rgba(245,245,245,1)',
  padding: '4vw 0',
  fontFamily: "'Gill Sans', sans-serif",
  marginBottom: '5.6vw'
});
const buttonStyle = reactive({
  width: '19.7vw',
  height: '8.5vw',
  margin: '-2.8vw 0',
  fontSize: '4.5vw'
});
const loginbuttonStyle = reactive({
  margin: '8vw 10vw 11.2vw 10vw',
  width: '80vw',
  height: '14.8vw',
  borderRadius: '13.2vw',
  fontSize: '4.4vw'
});
function returnStart() {
  uni.navigateBack();
}

const change = (e) => {
  console.log('change', e);
};
//验证码输入框
const tips = ref('');
const seconds = ref(10);
const uCodeRef = ref(null);

const codeChange = (text) => {
  tips.value = text;
};

const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码'
    });
    setTimeout(() => {
      uni.hideLoading();
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast('验证码已发送');
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start();
    }, 2000);
  } else {
    uni.$u.toast('倒计时结束后再发送');
  }
};

const end = () => {
  uni.$u.toast('倒计时结束');
};

const start = () => {
  uni.$u.toast('倒计时开始');
};

// const change = (e) => {
//   console.log('change', e);
// };
</script>

<style lang="scss">
@import './index.scss';
</style>
